<template>
    <div class="madp-set-tags hidden-scrollbar">
        <div class="name">{{ type == 1 ? '系统标签' : type == 2 ? '企业标签' : '个人标签' }}</div>
        <div class="tag-list" v-if="type == 1">
            <span :class="{ item: true, 'cursor-pointer': true, isActive: true }" v-for="(item, idx) in list" :key="idx">{{ item.tagName }}</span>
        </div>
        <div v-if="type == 2">
            <div v-for="(item, idx) in list" :key="idx">
                <div class="title">{{ item.groupName }}</div>
                <div class="tag-list">
                    <span
                        :class="{ item: true, 'cursor-pointer': true, isActive: showTagIds.includes(item1.id) }"
                        v-for="(item1, idx1) in item.tagNameList"
                        :key="idx1"
                        @click="chooseTag(item, item1)"
                        >{{ item1.name }}</span
                    >
                </div>
            </div>
        </div>
        <div class="tag-list" v-if="type == 3">
            <div :class="{ item: true, 'cursor-pointer': true, isActive: chooseTagsList.findIndex((ele) => ele.id == item.id) > -1 }" v-for="(item, idx) in list" :key="idx">
                <span @click="chooseTagOther(item)">{{ item.tagName }}</span>
                <i v-if="type == 3" class="el-icon-circle-close delete-icon" @click="deleteTag(item)"></i>
            </div>
            <div style="width: 100%; margin-top: 20px">
                <span class="item cursor-pointer" @click="dialogFormVisible = true">+添加标签</span>
            </div>
        </div>
        <div class="madp-btns">
            <div class="madp-btn cursor-pointer" v-if="type == 2 || type == 3" @click="confirm">确定</div>
        </div>
        <dialog-component title="添加标签" :visible.sync="dialogFormVisible" @confirm="confirmDialog">
            <el-form>
                <el-form-item label="标签名">
                    <el-input v-model="tagName" placeholder="请输入标签名"></el-input>
                </el-form-item>
            </el-form>
        </dialog-component>
        <back-btn />
    </div>
</template>
<script>
    import * as customerDetailApi from '@/api/customer-details';
    import DialogComponent from '@/components/dialog.vue';
    import backBtn from '@/components/back-btn.vue';
    export default {
        components: { DialogComponent, backBtn },
        data() {
            return {
                wxUserId: '',
                wxExternalUserid: '',
                type: '',
                dialogFormVisible: false,
                tagName: '',
                list: [],
                chooseTagsList: [],
                showTagIds: []
            };
        },
        created() {
            document.title = '';
        },
        activated() {
            this.list = [];
            this.chooseTagsList = [];
            this.showTagIds = [];
            this.wxUserId = this.$route.query.wxUserId;
            this.wxExternalUserid = this.$route.query.wxExternalUserid;
            this.type = this.$route.query.type;
            this.getTagsList();
            this.getPersonTag();
        },
        mounted() {},
        methods: {
            // 选择个人
            chooseTagOther(info) {
                let idx = this.chooseTagsList.findIndex((ele) => ele.id == info.id);
                if (idx > -1) {
                    this.chooseTagsList.splice(idx, 1);
                } else {
                    this.chooseTagsList.push(info);
                }
            },
            // 选择企业标签
            chooseTag(info, info1) {
                console.log('info=====', info);
                let item = this.chooseTagsList.find((ele) => ele.groupId == info.groupId);
                let itemIdx = this.chooseTagsList.findIndex((ele) => ele.groupId == info.groupId);
                if (item) {
                    item.tagNameList.forEach((ele) => {
                        let index = this.showTagIds.indexOf(ele.id);
                        if (index > -1) {
                            this.showTagIds.splice(index, 1);
                        }
                    });
                    this.chooseTagsList.splice(itemIdx, 1);
                }
                this.chooseTagsList.push({
                    createName: info.createName,
                    groupId: info.groupId,
                    groupName: info.groupName,
                    tagNameList: [info1]
                });
                this.showTagIds.push(info1.id);
            },
            // 确定添加标签
            confirmDialog() {
                if (!this.tagName.trim()) return this.$toast({ text: '请输入标签名', type: 'warning' });
                let obj = {
                    tagName: this.tagName.trim(),
                    wxUserId: this.wxUserId, //用户id
                    wxExternalUserid: this.wxExternalUserid //客户id
                };
                customerDetailApi.addPersonalLabels(obj).then((res) => {
                    if (res.data.code === 0) {
                        this.dialogFormVisible = false;
                        this.getTagsList();
                        this.tagName = '';
                    }
                });
            },
            // 确定添加标签
            confirm() {
                if (this.type == 2) {
                    let obj = {
                        wxUserId: this.wxUserId, //用户id
                        wxExternalUserid: this.wxExternalUserid, //客户id
                        wxList: this.chooseTagsList
                    };
                    customerDetailApi.personalBindingEnterpriseLabelSave(obj).then((res) => {
                        this.$router.back();
                    });
                } else if (this.type == 3) {
                    let arr = [];
                    this.chooseTagsList.map((ele) => {
                        arr.push(ele.id);
                    });
                    let obj = {
                        wxUserId: this.wxUserId, //用户id
                        wxExternalUserid: this.wxExternalUserid, //客户id
                        ids: arr
                    };
                    customerDetailApi.personalTabSelectedSave(obj).then((res) => {
                        this.$router.back();
                    });
                }
            },
            deleteTag(info) {
                customerDetailApi.deletePersonalAllTab(info.id).then((res) => {
                    let idx1 = this.list.findIndex((ele) => ele.id == info.id);
                    let idx2 = this.chooseTagsList.findIndex((ele) => ele.id == info.id);
                    this.list.splice(idx1, 1);
                    if (idx2 > -1) {
                        this.chooseTagsList.splice(idx2, 1);
                    }
                });
            },
            // 查询个人绑定标签
            getPersonTag() {
                if (this.type == 1) {
                    //
                } else if (this.type == 2) {
                    customerDetailApi
                        .personalBindingEnterpriseLabel({
                            wxExternalUserid: this.wxExternalUserid, //客户id
                            wxUserId: this.wxUserId //用户id
                        })
                        .then((res) => {
                            this.chooseTagsList = res.data.data;
                            this.chooseTagsList.map((ele) => {
                                ele.tagNameList.map((ele1) => {
                                    this.showTagIds.push(ele1.id);
                                });
                            });
                        });
                } else if (this.type == 3) {
                    customerDetailApi
                        .personalTabSelected({
                            wxExternalUserid: this.wxExternalUserid, //客户id
                            wxUserId: this.wxUserId //用户id
                        })
                        .then((res) => {
                            this.chooseTagsList = res.data.data;
                        });
                }
            },
            // 获取标签列表数据
            getTagsList() {
                if (this.type == 1) {
                    // 系统标签
                    customerDetailApi
                        .queryCrmLabel({
                            wxExternalUserid: this.wxExternalUserid, //客户id
                            wxUserId: this.wxUserId //用户id
                        })
                        .then((res) => {
                            this.list = res.data.data;
                        });
                } else if (this.type == 2) {
                    // 所有企业标签
                    customerDetailApi.allEnterpriseLabels({}).then((res) => {
                        this.list = res.data.data;
                    });
                } else if (this.type == 3) {
                    //所有个人标签
                    customerDetailApi
                        .allPersonalAllLabels({
                            wxUserId: this.wxUserId, //用户id
                            wxExternalUserid: this.wxExternalUserid //客户id
                        })
                        .then((res) => {
                            this.list = res.data.data;
                        });
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-set-tags {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 16px;
        overflow-x: scroll;
        background: #fafafa;
        .name {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(44, 44, 44, 0.4);
        }
        .title {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2c2c2c;
            margin-top: 8px;
        }
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            .item {
                margin-top: 9px;
                margin-right: 8px;
                padding: 6px 16px;
                background: #ffffff;
                border-radius: 16px;
                border: 1px solid rgba(44, 44, 44, 0.1);
                font-size: 15px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(44, 44, 44, 0.5);
                position: relative;
                .delete-icon {
                    position: absolute;
                    top: -3px;
                    right: 0px;
                    color: #ed5555;
                }
            }
            .isActive {
                background: rgba(237, 85, 85, 0.1);
                font-size: 15px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ed5555;
                // border: none;
            }
        }
        .madp-btns {
            display: flex;
            justify-content: center;
            .madp-btn {
                width: 100%;
                height: 40px;
                background: #ed5555;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                margin: 0 auto;
                font-size: 16px;
                color: #fff;
                margin-top: 3rem;
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
        }
        /deep/.el-form-item {
            display: flex;
            .el-form-item__content {
                flex: 1;
                .el-input__inner {
                    width: 100%;
                    border: 1px solid #dcdfe6;
                }
            }
        }
    }
</style>
